<template>
  <div class="textCard" :style="`width:${width}px`">
    <div class="numI" :style="`color:${item.color};font-size:32px`">
      {{ item.num }} <span style="font-size: 14px"> {{ item.numText }} </span>
    </div>
    <div class="textB">
      <span> {{ item.text }} </span>
      <el-tooltip
        v-if="item.iscontent"
        style=""
        class="item"
        effect="dark"
        :content="item.iscontent"
        placement="top-start"
      >
        <i class="el-icon-warning-outline"></i>
      </el-tooltip>
    </div>
  </div>
</template>

<script>
export default {
  name: "textCard",
  data() {
    return {};
  },
  props: {
    item: {
      type: Object,
    },
    width: {
      type: String,
    },
  },
  mounted() {},
  beforeDestroy() {},
};
</script>

<style lang="scss" scoped>
.textCard {
  width: 212px;
  height: 96px;
  background-color: #f5f7fb;
  border-radius: 8px;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.numL {
  font-weight: 600;
  line-height: 35px;
  height: 35px;
}

.textB {
  color: #999;
  font-size: 12px;
  margin-top: 8px;
}
</style>
